<template>
    <div>
        <Carousel autoplay loop>
            <CarouselItem v-for="item in items">
                <div class="carousel-div">
                    <a :href="item.url" target="_blank"><img :src="item.img" height="400px" width="100%"></a>
                    <div class="title">
                        <div class="inner">{{item.title}}</div>
                    </div>
                </div>
            </CarouselItem>
        </Carousel>
    </div>
</template>

<script>
    export default {
        name: "index-carousel",
        mounted(){
            let _this= this;
            this.$http({
                method: 'get',
                url: '/hm/api?m=getLeaderImgInfo'
            }).then(function (res) {
                _this.items = res.data;
            }).catch(function (err) {
                console.log(err);
            })
        },
        data() {
            return {
                items: [
                    // {
                    //     img: "https://via.placeholder.com/230x200",
                    //     url: "www.baidu.com",
                    //     title: "这是一个描述信息这是一个描述信息这是一个描述信息这是一个描述信息这是一个描述信息"
                    // },
                    // {
                    //     img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fy0.ifengimg.com%2Fd4a44fff10624b98%2F2013%2F1021%2Frdn_526466b752409.jpg&refer=http%3A%2F%2Fy0.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631779747&t=d2ea2cce9316fdaf50dd0accc0546926",
                    //     url: "www.baidu.com",
                    //     title: "这是一个描述信息"
                    // },
                    // {
                    //     img: "https://via.placeholder.com/230x200",
                    //     url: "www.baidu.com",
                    //     title: "这是一个描述信息"
                    // }
                ]
            }
        }
    }
</script>

<style scoped>
    .carousel-div {
        min-height: 400px;
        position: relative;
    }

    .title {
        position: absolute;
        right: 2px;
        bottom: 5px;
        padding: 5px;
        font-size: 16px;
        background-color: rgb(0, 0, 0, 0.5);
        width: 100%;
    }

    .inner {
        text-align: right;
        color: #fff;
    }
</style>